<template>
	<view>
		<!-- 封面 -->
		<view style="height: 350rpx;" class="position-relative bg-light"
		hover-class="bg-hover-light" @click="upload">
			<image v-if="form.cover" :src="form.cover" mode="aspectFill"
			style="height: 350rpx;width: 750rpx;"></image>
			<view 
			class="flex flex-column align-center justify-center position-absolute top-0 left-0 right-0 bottom-0">
				<text v-if="!form.cover" class="text-muted iconfont iconjia"
				style="font-size: 50rpx;"></text>
				<text v-if="!form.cover" 
				class="text-muted">点击添加封面图</text>
				<view v-else
				class="px-2 py-1 rounded-circle text-white"
				style="background-color: rgba(0,0,0,0.3);">
					点击修改封面图
				</view>
			</view>
		</view>
		<!-- 标题 -->
		<form-item title="标题">
			<input type="text" v-model="form.title" placeholder="请填写视频标题" class="w-100 font" placeholder-class="text-light-muted"/>
		</form-item>
		<picker mode="selector" :range="range" @change="change">
			<form-item title="分类" showRight hover>
				<text :class="categoryTitle ? 'text-dark':'text-light-muted'">{{categoryTitle?categoryTitle:'请选择分类'}}</text>
			</form-item>
		</picker>
		<form-item title="描述">
			<textarea style="width: 550rpx;" placeholder="请填写视频描述..." class="py-3" v-model="form.desc" placeholder-class="text-light-muted"/>
		</form-item>
		<!-- #ifdef MP -->
		<main-big-button @click="create">发布</main-big-button>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import formItem from '@/components/common/form-item.vue';
	import mainBigButton from '@/components/common/main-big-button.vue';
	export default {
		components: {
			formItem,
			mainBigButton
		},
		data() {
			return {
				id:0,
				form:{
					cover:"",
					category_id:0,
					title:"",
					desc:""
				},
				range:[],
				categories:[]
			}
		},
		computed:{
			categoryTitle(){
				let index=this.categories.findIndex(v=>v.id===this.form.category_id)
				if(index===-1){
					return ''
				}
				return this.range[index]
			}
		},
		onLoad(e) {
			this.$H.get('/category').then(res=>{
				this.categories=res
				this.range=res.map(v=>v.title)
			})
			if(e.data){
				let data=JSON.parse(decodeURIComponent(e.data))
				console.log(data)
				this.form={
					cover:data.cover,
					category_id:data.category_id,
					title:data.title,
					desc:data.desc
				}
				this.id=data.id
			}
		},
		onNavigationBarButtonTap() {
			this.create()
		},
		methods: {
			upload(){
				uni.chooseImage({
					count:1,
					success: (e) => {
						this.$H.upload('/upload',{
							filePath:e.tempFilePaths[0]
						}).then(res=>{
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
							this.form.cover=res.url
						})
					}
				})
			},
			create(){
				let url=this.id===0?'/video':'/video/'+this.id
				let msg=this.id===0?'创建成功':'更新成功'
				this.$H.post(url,this.form,{token:true}).then(res=>{
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					setTimeout((res)=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			},
			// 修改分类
			change(e){
				this.form.category_id = this.categories[e.detail.value].id
			}
		}
	}
</script>

<style>

</style>
